<script setup lang='ts'>
import { inject, ref } from 'vue'
import { useTodoStore } from '@/stores/todoStore'
import type { iItem, todoItemProps } from '@/interfaces/interfaceTodo'
import { Delete, Edit } from '@element-plus/icons-vue'

const updateItem = inject<(id: string) => void>('updateItem', () => {})

const props = defineProps(['data'])
const todoStore = useTodoStore()

const checked = ref(props.data.checked)

// 选择事件
function checkChange(value: boolean, item:iItem):void {
  todoStore.checkTodo(value, item.id)
}
// 删除待办事项
function delTodoItem(id: string) {
  todoStore.delTodoItem(id)
}
// 修改待办事项
function editTodoItem(id: string) {
  updateItem(id)
}
</script>

<template>
    <div class='todo-item-wrapper'>
      <div class='todo-item-content'>
        <el-checkbox v-model='checked' class='todoCheckbox' size='large' @change='checkChange($event, data)' />
        <div class='content' :class='{ "contentChecked": data.checked }'>{{ data.value }}</div>
      </div>
      <div class='todo-item-button'>
        <el-button type="primary" :icon="Edit" circle  @click='editTodoItem(data.id)'/>
        <el-button type="danger" :icon="Delete" circle  @click='delTodoItem(data.id)'/>
      </div>
    </div>
</template>
  
<style lang='scss' scoped>
.todoCheckLabel {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 100%;
}
.todoCheckbox {
  margin-right: 10px;
}
.itemDelete {
  min-width: 50px;
  margin-left: 10px;
  cursor: pointer;
}
.contentChecked {
  text-decoration: line-through;
  opacity: 0.5;
}
.todo-item-wrapper {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  .todo-item-content {
    display: flex;
    flex: 1;
    align-items: center;
    word-break: break-all;
  }
  .todo-item-button {
  }
}
</style>